<div class="apes-preview-dialog">


  <div class="preview-dialog-content">
    <!--<a href="{{previewImage.url}}" target="_blank" rel="noopener noreferrer">-->
    <!--<img class="preview-img" [src]="previewImage.url"/>-->
    <!--</a>-->
    <div *ngIf="isLoading" class="preview-dialog-content-loading">
      <apes-spin apesSimple></apes-spin>
    </div>

    <ng-container *ngIf="showPoints">

      <img [src]="previewImage.url" style="display: none;" [id]="idName">
      <svg class="preview-dialog-content-svg" height="100%" width="100%">
        <g height="100%" width="100%" cdkDrag cdkDragBoundary="" (cdkDragMoved)="dragStart()">
          <!--<g id="viewport">-->
          <image [attr.xlink:href]="previewImage.url"></image>
          <rect *ngFor="let point of previewImage['points']" [attr.x]="point.x" [attr.y]="point.y"
                [attr.height]="point.h" [attr.width]="point.w" [attr.data-sn]="point.sn" class="svg-rect"
                [ngClass]="{'svg-rect-selected':point.activate}"></rect>
        </g>
      </svg>

    </ng-container>

    <ng-container *ngIf="!showPoints">

      <div id="nImg" class="preview-dialog-content-img" cdkDrag (cdkDragMoved)="dragStart()">
        <img [src]="previewImage.url" [id]="idName">
      </div>

    </ng-container>


    <div class="image-tools">
      <button apes-button apesType="default" apesShape="circle" class="zoomOut" (click)="zoomOut()">
        <i apes-icon apesType="zoom-in"></i>
      </button>
      <button apes-button apesType="default" apesShape="circle" class="zoomIn" (click)="zoomIn()">
        <i apes-icon apesType="zoom-out"></i>
      </button>
      <button *ngIf="!showPoints" apes-button apesType="default" apesShape="circle" class="zoomIn" (click)="rotation()">
        <i apes-icon apesType="redo"></i>
      </button>
      <button apes-button apesType="default" apesShape="circle" class="reset" (click)="reset()">
        <i apes-icon apesType="sync"></i>
      </button>
    </div>
  </div>

  <div class="preview-carousel">
    <ng-container *ngFor="let file of fileList,let i =index">
      <div class="preview-thumbnail" (click)="clickThumbnail(i)">
        <img class="preview-thumbnail-img" [src]="file.url"/>
      </div>
    </ng-container>
  </div>


</div>
